<template>
  <div id="app">
    <ScaleBox v-if="showPage" :width="pageWidth" :height="pageHeight" bgc="transparent" :delay="1" :isFlat="false">
      <router-view />
    </ScaleBox>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";

import ScaleBox from "vue3-scale-box";

const pageWidth = ref(1920);
const pageHeight = ref(1080);
const showPage = ref(false);

function isFullscreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement || // Chrome, Safari, Opera
    document.mozFullScreenElement ||   // Firefox
    document.msFullscreenElement       // IE/Edge
  );
}

function getTitleBarHeight() {
  // 全屏模式下没有标题栏
  if (isFullscreen()) {
    return 0;
  }
  const heightDiff = window.outerHeight - window.innerHeight;
  return Math.max(0, heightDiff + 40);
}

function getPageHeight() {
  showPage.value = false;
  const titleBarHeight = getTitleBarHeight();
  console.log("估算标题栏高度:", titleBarHeight);
  pageHeight.value = 1080 - titleBarHeight;
  showPage.value = true;
}
onMounted(() => {
  window.addEventListener("resize", () => {
    getPageHeight();
  });
  getPageHeight();
});
</script>
<style lang="scss" scoped></style>
